<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tableFrom.position" @tab-click="seachList">
          <el-tab-pane :label="item.name" :name="item.position.toString()" v-for="(item, index) in headeNum"
            :key="index" />
        </el-tabs>

        <router-link :to="{ path: '/design/list/creatBanner' }">
          <el-button size="small" type="primary" class="mr10" v-hasPermi="['admin:product:save']">添加轮播图</el-button>
        </router-link>
        <!-- <el-button size="small" type="success" class="mr10" @click="onCopy" v-hasPermi="['admin:product:save']">商品采集</el-button>
        <el-button size="small" icon="el-icon-upload2" @click="exports" v-hasPermi="['admin:export:excel:product']">导出</el-button> -->
      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="medium"
        :highlight-current-row="true" :header-cell-style="{ fontWeight: 'bold' }">
        <!-- <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品分类：">
                <span v-for="(item, index) in props.row.cateValues.split(',')" :key="index" class="mr10">{{ item }}</span>
              </el-form-item>
              <el-form-item label="市场价：">
                <span>{{ props.row.otPrice }}</span>
              </el-form-item>
              <el-form-item label="成本价：">
                <span>{{ props.row.cost }}</span>
              </el-form-item>
              <el-form-item label="收藏：">
                <span>{{ props.row.collectCount }}</span>
              </el-form-item>
              <el-form-item label="虚拟销量：">
                <span>{{ props.row.ficti }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column> -->
        <el-table-column prop="id" label="ID" min-width="50" />
        <el-table-column label="图片" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px" :src="scope.row.imgUrl"
                :preview-src-list="[scope.row.imgUrl]" />
            </div>
          </template>
        </el-table-column>


        <el-table-column label="位置" min-width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.position == 1">APP首页</span>
            <span v-else-if="scope.row.position == 2">商品分类</span>
          </template>
        </el-table-column>


        <!-- 跳转类型 -->
        <el-table-column label="跳转类型" min-width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.linkType == 10">分类跳转</span>
            <span v-else-if="scope.row.linkType == 20">专区跳转</span>
            <span v-else-if="scope.row.linkType == 30">H5跳转</span>
          </template>
        </el-table-column>



        <el-table-column label="添加时间" min-width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80" fixed="right">
          <template slot-scope="scope" v-if="checkPermi(['admin:banner:display'])">
            <el-switch :disabled="Number(tableFrom.type) > 2" v-model="scope.row.isShow" :active-value=1 :inactive-value=0
              active-text="显示" inactive-text="隐藏" @change="onchangeIsShow(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <router-link :to="{ path: '/design/list/creatBanner/' + scope.row.id }">
              <el-button type="text" size="small" class="mr10" v-if="tableFrom.type !== '5' && tableFrom.type !== '1'"
                v-hasPermi="['admin:banner:save']">编辑</el-button>
            </router-link>
            <el-button type="text" size="small" @click="handleDelete(scope.row.id, tableFrom.type)"
              v-hasPermi="['admin:banner:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div> -->
    </el-card>

  </div>
</template>

<script>
import { bannerListApi, bannerDeleteApi, displayApi, hideApi, bannerHeadersApi, productExcelApi } from '@/api/pagemanagement'
import { getToken } from '@/utils/auth'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
export default {
  name: 'BannerList',
  components: {},
  data() {
    return {
      props: {
        children: 'child',
        label: 'name',
        value: 'id',
        emitPath: false
      },
      // roterPre: roterPre,
      headeNum: [],
      listLoading: true,
      tableData: {
        data: [],
      },
      tableFrom: {
        position: '1'
      },
      categoryList: [],
      merCateList: [],
      objectUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
    }
  },
  mounted() {
    this.goodHeade()
    this.getList()
    this.checkedCities = this.$cache.local.has('goods_stroge') ? this.$cache.local.getJSON('goods_stroge') : this.checkedCities;
  },
  methods: {
    checkPermi,
    seachList() {
      this.getList()
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCloseMod(item) {
      this.dialogVisible = item
      this.goodHeade();
      this.getList();
    },
    // 复制
    onCopy() {
      this.dialogVisible = true
    },
    // 导出
    exports() {
      productExcelApi({ cateId: this.tableFrom.cateId, keywords: this.tableFrom.keywords, type: this.tableFrom.type }).then((res) => {
        window.location.href = res.fileName;
      })
    },
    // 获取商品表单头数量
    goodHeade() {
      bannerHeadersApi().then(res => {
        this.headeNum = res
      }).catch(res => {
        this.$message.error(res.message);
      })
    },
    // 列表
    getList() {
      this.listLoading = true
      bannerListApi({ "position": this.tableFrom.position }).then(res => {
        this.tableData.data = res
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },
    // 删除
    handleDelete(id, type) {
      this.$modalSure(`删除 id 为 ${id} 的轮播图`).then(() => {
        const deleteFlag = type == 5 ? 'delete' : 'recycle';
        bannerDeleteApi(id, deleteFlag).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.goodHeade();
        })
      })
    },
    onchangeIsShow(row) {
      row.isShow
        ? displayApi(row.id).then(() => {
          this.$message.success('显示成功')
          this.getList()
          this.goodHeade();
        }).catch(() => {
          row.isShow = !row.isShow
        }) : hideApi(row.id).then(() => {
          this.$message.success('隐藏成功')
          this.getList()
          this.goodHeade();
        }).catch(() => {
          row.isShow = !row.isShow
        })
    },

  }
}
</script>

<style scoped lang="scss">
.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}

.taoBaoModal {
  //  z-index: 3333 !important;
}

.demo-table-expand {
  ::v-deep label {
    width: 82px;
  }
}

.demo-table-expand {
  ::v-deep .el-form-item__content {
    width: 77%;
  }
}

.selWidth {
  width: 350px !important;
}

.seachTiele {
  line-height: 30px;
}

.relative {
  position: relative;
}
</style>
